<template>
    <div class="errorpage" ref="bgstar" id="bgstar">
        <img :src="myImg" class="myimg" alt="">
        <div class="down" @click="gotowhere()">
            {{ count }}S倒计时
        </div>
        <span v-for="(l, i) in spanList" :key="i" class="spandot" :style="l">
        </span>
    </div>
</template>

<script setup lang="ts">
import img from '@/assets/images/404.png'
import { onMounted, onUnmounted, type Ref, } from 'vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

interface spanTypes {
    left: string,
    top: string,
    transform: string,
    animationDelay: string,
    background: string,
}

const router = useRouter()
const myImg = ref(img)
const spanList = ref<Array<spanTypes>>([])
const count = ref(5)
const bgstar = ref()
let timer: any = null


const getSpanListInit = () => {
    let width = bgstar.value.clientWidth;
    let height = bgstar.value.clientHeight;
    for (var i = 0; i < 520; i++) {
        let left = Math.floor(Math.random() * width)
        let top = Math.floor(Math.random() * height)
        let scaler = (Math.random() * 1.5)
        let rate = (Math.random() * 2.5)
        let r = Math.random() * 225
        let g = Math.random() * 225
        let b = Math.random() * 225
        let a = Math.random() * 1
        spanList.value.push({
            left: left + 'px',
            top: top + 'px',
            transform: `scale(${scaler})`,
            animationDelay: rate + 's',
            background: `rgba(${r},${g},${b},${a})`,
        })
    }
}
const timeDown = () => {
    timer = setInterval(() => {
        if (count.value > 0) {
            count.value--;
        } else {
            clearInterval(timer)
            timer = null;
            gotowhere()
        }
    }, 1000)
}

onUnmounted(() => {
    clearInterval(timer)
    timer = null;
})

const gotowhere = () => {
    router.push('/login')
}
onMounted(() => {
    getSpanListInit()
    timeDown()
})
</script>

<style lang="scss" scoped>
.errorpage {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    padding: 0 !important;
    overflow: hidden;

    .down {
        position: absolute;
        left: 20px;
        top: 20px;
        border: 1px solid #fff;
        color: #fff;
        width: 70px;
        height: 30px;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
    }

    .dao {
        position: absolute;
        top: 20px;
        right: 20px;

        ::v-deep .van-circle__text {
            color: #fff !important;
        }
    }

    .myimg {
        width: 270px;
        height: 270px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z-index: 10;
    }

    .spandot {
        position: absolute;
        z-index: 100;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        animation: flash 3s infinite alternate;
    }

    @keyframes flash {
        from {
            opacity: 0;
        }

        to {
            opacity: 0.5;
        }
    }
}
</style>